<template>
    <div>
        <div style=" width: 17rem; float: right; height: 4rem; margin-bottom: 2rem">
            <button :disabled="flag1"  style="line-height: 4rem;  width: 6rem; font-size: 1.8rem; ">详情</button>
            <button  :disabled="flag1" style="line-height: 4rem; width: 6rem; font-size: 1.8rem; margin-left: 2rem;">编辑</button>
        </div>
        <div class="tabel_ti">
            <table cellspacing="0" cellpadding="1">
                <tr>
                    <th>
                    </th>
                    <th @click="paixu()">部门</th>
                    <th>性名</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>状态</th>
                    <th>入职时间</th>
                    <th>转正日期</th>
                    <th>电话</th>
                    <th>手机号</th>
                    <th>ID</th>
                </tr>
                <tr v-for="(item,index) in list" :key="index" @click="jinyong(item)">
                    <td >{{ item.id }}</td>
                    <td>{{ item.bumen }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.zhiwei }}</td>
                    <td>{{ item.zhuangtai }}</td>
                    <td>{{ item.time }}</td>
                    <td>{{ item.time1 }}</td>
                    <td></td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.ID }}</td>
      
                </tr>
            </table>
            <span style="font-size: 1.8rem; color: rgb(133, 133, 133);">个人资料请认真填写！</span>
        </div>
        {{ list1 }}
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
const flag1 = ref(true)
const list1 = ref([])
const list = ref([
    { id: 1, bumen: '开发部',name:'张三', sex: '男', zhiwei: '项目主管',zhuangtai:'正式', time: '2022-01-01', time1: '2022-01-01', phone: '123456789', ID: 1 },
    { id: 2, bumen: '市场部',name:'李四', sex: '男', zhiwei: '小兵',zhuangtai:'正式', time: '2022-01-01', time1: '2022-01-01', phone: '123456789', ID: 2 },
    { id: 1, bumen: '小卖部',name:'王五', sex: '男', zhiwei: '导购员',zhuangtai:'正式', time: '2022-01-01', time1: '2022-01-01', phone: '123456789', ID: 3 },
])

 const paixu = () => {
    flag.value = !flag.value
    if (flag.value == true) {
        list.value.sort((a, b) => b.id - a.id)
    }else{
        list.value.sort((a, b) => a.id - b.id)
    }
}
const jinyong = (item) => {
    list1.value.push(item)
    flag1.value = false
}
</script>

<style>
.tabel_ti {
    width: 160rem;
    margin-top: 3rem;
    margin-left: 2rem;
    background: #f9f9f9;

}
.table_1{
    border: .5px solid rgb(193, 193, 193);
}
.tabel_ti table {
    width: 100%;

}

.tabel_ti table th {
    height: 4rem;
    font-size: 2rem;
    border: .5px solid rgb(193, 193, 193);
    
}

.tabel_ti table td {
    font-size: 2rem;
    text-align: center;
    line-height: 4.6rem;
    border: .5px solid rgb(193, 193, 193);

}
</style>